<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>GIS以房找人</title>


    <link rel="stylesheet" href="/static/webjars/layui/css/layui.css"  media="all">


    <script type="application/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cOtTydbKqZG2r1XaH49gtl34hKQ3VczY"></script>

    <style type="text/css">
        .anchorBL{
            display:none;
        }
        html{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<div style="width: 100%;height: 100%;" id="body">

    <div style="width: 100%;height: 100%">
        <div style="height: 20px;width: 100%;margin-bottom: 20px;position: fixed;z-index: 100">
            <div style="width: 300px;height: 20px;text-align: left;margin-left: 50px;margin-top: 20px">
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="demoReload" placeholder="输入姓名" autocomplete="off">
                </div>
                <button class="layui-btn" id="button" data-type="reload">搜索</button>
            </div>
        </div>
        <div id="allmap" style="position: absolute;height: 98%;width: 100%;background-color: #4476A7;"></div>

    </div>

</div>

</body>
</html>
<script type="application/javascript" src="/static/webjars/layui/layui.js"></script>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作


    //百度地图API功能
    var map = new BMap.Map("allmap");  // 创建Map实例
    var zoom = 13;
    layui.use('table', function() {
        var element = layui.element;
        //…
        var layer = layui.layer;
        var $ = layui.$;
        var active = {
            reload: function () {
                var demoReload = $('#demoReload');
                console.log(demoReload.val());
                if(demoReload.val() === ''){
                    init();
                }else {
                    data = {keyword: demoReload.val()};
                    $.post("/ajax/searchHouseInfo/searchHousePositionGisByName",
                        {
                            keyword: demoReload.val()
                        },
                        function (data) {
                            remove_overlay();
                            layer.msg("查询完毕,一共查询到" + data.count + "条记录");
                            nowtimestamp = (new Date()).getTime();
                            if (data.data.length > 0) {
                                map.centerAndZoom(new BMap.Point(data.data[0].lng, data.data[0].lat), zoom);
                                for (var i = 0; i < data.data.length; i++) {
                                    var point = new BMap.Point(data.data[i].lng, data.data[i].lat);
                                    addMarker(point, data.data[i].id, data.data[i]);

                                }
                            } else {
                                map.centerAndZoom("兴文县", zoom);
                            }
                        }
                    );
                }
            }
        };

        $('#button').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });

    map.addTileLayer(new BMap.PanoramaCoverageLayer());

    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP,
            BMAP_PERSPECTIVE_MAP
        ]}));

    //初始化
    function init() {
//		var point = new BMap.Point(116.404, 39.915); // 创建点坐标


        map.enableScrollWheelZoom();                 //启用滚轮放大缩小
//		var mapStyle={  style : "mapbox" }
//		map.setMapStyle(mapStyle);
        // 隐藏logo


        $.ajax({
            url:"/ajax/searchHouseInfo/searchHousePosition",
            method: "post",
            dataType : "json",//返回类型
            contentType : "application/x-www-form-urlencoded; charset=utf-8",
            success: function(data){
                if(data.data.length>0){
                    map.centerAndZoom(new BMap.Point(data.data[0].lng,data.data[0].lat),zoom);
                    for(var i=0 ;i<data.data.length;i++){
                        var point = new BMap.Point(data.data[i].lng,data.data[i].lat);
                        addMarker(point,data.data[i].id,data.data[i]);
                    }
                }else{
                    map.centerAndZoom("兴文县",zoom);
                }
            }
        });
    }


    function addMouseOverHandler(content,marker){
        marker.addEventListener("mouseover",function(e){
            openInfo(content,e)}
        );
    }
    function openInfo(data,e){
        console.log("ha:"+data.id);
        var opts = {
            width : 300,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            offset:new BMap.Size(0, 0),
            title : data.buildName+" <a href='/house/observeHouse?id="+data.id
            +"'"
            +" target='_blank'"
            +"style='font-size: 12px; color: rgb(61, 109, 204); margin-left: 5px; text-decoration: none;'"
            +"onmousemove='this.style.textDecoration=&quot;underline&quot;'"
            +"onmouseout='this.style.textDecoration=&quot;none&quot;'"
            +">详情»</a>" , // 信息窗口标题
            enableMessage:true,//设置允许信息窗发送短息
        };
        var content = "<div style='font-size: 12px; padding: 5px 0px; overflow: hidden;'>"
            +"<p style='padding: 0px; margin: 0px; line-height: 18px; font-size: 12px; color: rgb(77, 77, 77);'>地址："+data.province+data.city+data.county+data.town+data.village+"</p>"
            +"<p style='padding: 0px; margin: 0px; line-height: 18px; font-size: 12px; color: rgb(77, 77, 77);'>房主姓名："+data.name+"</p>"
            +"<p style='padding: 0px; margin: 0px; line-height: 18px; font-size: 12px; color: rgb(77, 77, 77);'>房主电话："+data.tellphone+"</p>"
            +"</div>"
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    }


    //清除覆盖物
    function remove_overlay(){
        map.clearOverlays();
    }


    function callback(e)//单击热点图层
    {
        var customPoi = e.customPoi;//poi的默认字段
        var contentPoi=e.content;//poi的自定义字段
        var content = '<p style="width:280px;margin:0;line-height:20px;">地址：' + customPoi.address + '<br/>价格:'+contentPoi.dayprice+'元'+'</p>';
        var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title: customPoi.title, //标题
            width: 290, //宽度
            height: 40, //高度
            panel : "panel", //检索结果面板
            enableAutoPan : true, //自动平移
            enableSendToPhone: true, //是否显示发送到手机按钮
            searchTypes :[
                BMAPLIB_TAB_SEARCH,   //周边检索
                BMAPLIB_TAB_TO_HERE,  //到这里去
                BMAPLIB_TAB_FROM_HERE //从这里出发
            ]
        });
        var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
        searchInfoWindow.open(point);
    }





    //标注
    function addMarker(point, index,data){  // 创建图标对象
        var myIcon = new BMap.Icon("/static/images/house/marker_red_sprite.png", new BMap.Size(30, 30), {
            // 指定定位位置。
            // 当标注显示在地图上时，其所指向的地理位置距离图标左上
            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
            // 图标中央下端的尖角位置。
            anchor: new BMap.Size(15, 15),
            // 设置图片偏移。
            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
            // 需要指定大图的偏移位置，此做法与css sprites技术类似。
            imageOffset: new BMap.Size(10, 1 - index * 0)   // 设置图片偏移

        });
        // 创建标注对象并添加到地图
        var marker = new BMap.Marker(point, {icon: myIcon});
        marker.setTitle("点击查看详情");
        marker.addEventListener('click',function(){

            window.open("/house/observeHouse?id="+index);
        });



        addMouseOverHandler(data,marker);

        map.addOverlay(marker);
    }
    //定位
    function getPointNow(){
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
            }
            else {
                map.panTo(new BMap.Point(105.238511,28.303847));
            }
        },{
            enableHighAccuracy: true
        });
    }


    init();

    //全景图预览
    function quanjingtu(x,y){
        var panorama = new BMap.Panorama('quanjingtu');
        panorama.setPov({heading: -40, pitch: 6});
        panorama.setPosition(new BMap.Point(x, y)); //根据经纬度坐标展示全景图
    }

</script>
